<template>
  <div class="playersInfo">
    <el-table
      :data="tableData"
      class="tableContent1"
      :default-sort = "{prop: 'grade', order: 'descending'}"
      style="width: 100%">
      <el-table-column
        type="index"
        label="排行">
      </el-table-column>
      <el-table-column
        label="微信头像">
        <template slot-scope="scope">
          <img :src=scope.row.wxImg alt="头像" style="width:50%;"/>
        </template>
      </el-table-column>
      <el-table-column
      prop="nicname"
      label="微信昵称">
    </el-table-column>
      <el-table-column
        prop="grade"
        sortable
        label="得分">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/*eslint-disable*/
  import { getGradeAction ,getGradeRanking } from '../axios/api/playerRank_api'

  export default {
    name: 'playerRank',
    data() {
      return {
        activityId: '',
        tableData: []
      }
    },
    created() {
      this.activityId = this.$route.query.activityId
      this.getGrade()
      this.getGradeList()
    },
    methods: {
      async getGrade() {
        let {data} = await getGradeAction({activityId: this.activityId})
        if (data.code == 1) {
          let activityGradeList = data.activityGradeList
          activityGradeList.forEach((list, index) => {
            let item = {
              rank: index,
              wxImg: list.userInfo && list.userInfo.headimgurl,
              nicname: list.userInfo && list.userInfo.nickname,
              grade: list.grade
            }
            this.tableData.push(item)
          })
        } else {
          this.$message({
            type: 'error',
            message: '服务器错误，请稍后再试！'
          })
        }
      }
    },
    async getGradeList() {
      let {data} = await getGradeRanking({activityId: this.activityId})
      if (data.code == 1) {
        let activityGradeList = data.activityGradeList
        this.number = activityGradeList && activityGradeList.length
        activityGradeList.forEach((list, index) => {
          let item = {
            rank: index,
            wxImg: list.userInfo && list.userInfo.headimgurl,
            nicname: list.userInfo && list.userInfo.nickname,
            openId: list.username,
            grade: list.grade
          }
          this.tableData.push(item)
        })
      } else {
        this.$message({
          type: 'error',
          message: '服务器错误，请稍后再试！'
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .playersInfo{
    background-color: #e9e9e7;
  }
</style>
<style>
.tableContent1 .is-leaf{
  background-color: #2fbd53;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  border-right: 2px solid #ebeef5;
}
</style>
